<template>
  <div class="friends">
    <div class="title">已关注的圈子</div>
    <div class="pass">
      <van-tag
        @click="goInfo"
        plain
        size="20"
        color="#DAECF5"
        text-color="#225599"
        round
        v-for="item of passList"
        :key="item"
      >{{item}}</van-tag>
      <div v-if="passList.length > 6" @click="changeFoldState">
        <span v-if="brandFold">
          展开
          <van-icon name="arrow-down" size="15px" color="#DBDBDB"/>
        </span>
        <span v-else>
          收起
          <van-icon name="arrow-up" size="15px" color="#DBDBDB"/>
        </span>
      </div>
    </div>
    <div class="title">推荐的圈子</div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div @click="goInfo" class="list" v-for="item in list" :key="item.id">
        <div class="list_left">
          <img :src="item.img">
          <div class="text">
            <span class="text_name">{{item.name}}</span>
            <span class="text_content">签名：{{item.signature}}</span>
          </div>
        </div>
        <!-- <div class="button" @click="clickNuu()" v-if="item.status == 0">
            <van-icon name="plus" size='10px' color='red'/>
            <span>关注</span>
        </div>-->
        <van-button type="primary" size="mini" @click="clickNuu()" v-if="item.status == 0">关注</van-button>
        <van-button @click="clickNuu()" v-else type="danger" size="mini">取消关注</van-button>
        <!-- <div class="button" @click="clickNuu()" v-if="item.status == 1">
            <span>取消关注</span>
        </div>-->
      </div>
    </van-list>
  </div>
</template>

<script>
import { Icon, Cell, List, Tag, Button } from 'vant'

export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [List.name]: List,
    [Tag.name]: Tag,
    [Button.name]: Button
  },
  data() {
    return {
      list: [
        {
          id: 0,
          img:
            'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
          name: '遥远',
          signature: '其帆远航',
          status: 0
        },
        {
          id: 1,
          img:
            'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          name: '艰辛',
          signature: '生活痛苦。。。。',
          status: 0
        },
        {
          id: 2,
          img: 'http://img.sccnn.com/bimg/338/29147.jpg',
          name: '努力',
          signature: '少壮不努力，老大徒伤悲',
          status: 0
        },
        {
          id: 3,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092451_31905.jpg',
          name: '。。。。',
          signature: '~~~~~~~',
          status: 0
        },
        {
          id: 4,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092455_98714.jpg',
          name: '忧伤',
          signature: '世间无论什么都很优秀',
          status: 1
        },

        {
          id: 5,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092453_15640.jpg',
          name: '某某',
          signature: '箭头天王积分活动和',
          status: 0
        },
        {
          id: 6,
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092454_45398.jpg',
          name: '盛情',
          signature: 'kdffdbvgg',
          status: 1
        }
      ],
      passList: [
        '学区房',
        '风水',
        '家装',
        '二次房改',
        '住房制度',
        '租购并举',
        'REITs',
        '新盘',
        '二手房',
        '出租房',
        '公园房',
        '公寓'
      ],
      finished: false,
      loading: false,
      brandFold: true
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 加载状态结束
        this.loading = false
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list[i])
        }
        // 数据全部加载完成
        if (this.list.length >= 5) {
          this.finished = true
        }
      }, 500)
    },
    changeFoldState() {
      this.brandFold = !this.brandFold
    },
    goInfo() {
      this.$router.push('/topic')
    }
  }
}
</script>

<style lang="less">
.friends {
  padding: 10px 0;
  box-sizing: content-box;
  .title {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .pass {
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .van-tag {
      margin-right: 5px;
      margin-top: 5px;
    }
    div {
      font-size: 12px;
      color: #ada49c;
      margin-top: 5px;
      span {
        display: inline-block;
        position: relative;
        .van-icon {
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
  .list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    background: #fff;
    .list_left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      img {
        width: 35px;
        height: 35px;
        border-radius: 5px;
      }
      .text {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        .text_name {
          font-size: 14px;
          display: inline-block;
        }
        .text_content {
          font-size: 12px;
          color: #e5e5e5;
        }
      }
    }
    .button {
      padding: 3px 5px;
      box-sizing: border-box;
      width: 60px;
      height: 30px;
      border-radius: 5px;
      // border: 1px solid #;
      cursor: pointer;
      span {
        display: inline-block;
        font-size: 12px;
        color: red;
      }
    }
  }

  &-group {
    margin-bottom: 15px;
  }

  &-links {
    padding: 15px 0;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    .van-icon {
      display: block;
      font-size: 24px;
    }
  }
}
</style>
